<template>
    <div class="edit">
        <h3>专辑列表</h3>
        <ul>
            <li v-for="item in arr" :key="item.id">
                <router-link :to="`/album?album_id=${item.album_id}&album_name=${item.album_name}`">
                    <div class="pos">
                        <i></i>
                    </div>
                    <!-- 自定义指令 -->
                    <div class="img-box">
                        <img 
                        :src="loadingUrl"
                        v-load="item.cover_image_url"
                        :alt="item.album_name">
                    </div>
                    <p>{{ item.album_name }}</p>
                    <div class="time">
                        {{ item.release_date }}
                    </div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<style lang="less" scoped>
@import '../common/less/varible.less';

.edit {
    padding: @pad;
    box-sizing: border-box;
    margin-top: 15px;
    h4 {
        font-weight: normal;
        font-size: 18px;
        margin-top: 10px;
    }
    ul {
        margin-top: 10px;
        width: 100%;
        display: grid;
        grid-template-rows: repeat(2, auto);
        grid-template-columns: repeat(2, 1fr);
        column-gap: 5px;
        row-gap: 10px;
        background-color: #fcfcfd;

        li {
            a {
                display: block;
                width: 100%;
                position: relative;
                background-color: #fcfcfd;
                box-shadow: 0px 0px 4px #ccc;
                .img-box {
                    width: 100%;
                    height: 160px;
                    overflow: hidden;
                }
                img {
                    width: 100%;
                }

                p {
                    font-size: 16px;
                    font-weight: normal;
                    font-family: Arial, Helvetica, sans-serif;
                    width: 100%;
                    line-height: 170%;
                    padding: 5px 5px;
                    // 多行文本溢出变省略号
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 1;
                    overflow: hidden;
                   
                }
                div.time {
                    font-size: 14px;
                    font-weight: normal;
                    font-family: Arial, Helvetica, sans-serif;
                    width: 100%;
                    line-height: 170%;
                    color: #666;
                    padding: 5px 5px;
                }

                .pos {
                    position: absolute;
                    top: 4px;
                    right: 4px;
                    color: #fff;
                    font-size: 12px;
                    font-family: Arial, Helvetica, sans-serif;

                    i {
                        display: inline-block;
                        vertical-align: middle;
                        width: 12px;
                        height: 12px;
                        background-size: cover;
                        background-image: url();
                    }

                    span {
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}
</style>

<script>
// 导入api
import { albumItems , host} from '../api/index'
// 保留组件
export default {
    data() {
        return {
            // 定义数组记录所有的音乐记录
            arr: [],
            // 这个图片资源是在项目本地的
            loadingUrl: require('../assets/img/loading.gif'),
        }
    },

    // 自定义指令 
    directives: {
        // v-load 指令 (做加载图片的提示)
        load(el, binding) {
            // console.log(binding)
            // 创建图片实例
            const image = new Image();
            let src = binding.value;//真实图片路径 （这个图片是服务器资源）
            image.src = src;
            // 监听图片加载加载
            image.onload = () => {
                // console.log("加载图片完成");
                // 等图片资源请求 并加载完成 再渲染图片
                el.src = src;
            }
        }
    },

    // 过滤器
    filters: {
        tenThousand(value) {
            // 保留两位小数
            return ((value - 0) / 10000).toFixed(2);
        }
    },

    // 编写方法
    methods: {
        // 获取编辑推荐音乐的方法
        async getEditRecommand(page=1,pageSize=50) {
            // 调用接口
            await albumItems({ page, pageSize })
                .then(
                    // 请求成功
                    content => {
                        // 后台的数据
                        console.log("--->",content)
                        let { code, result } = content;
                        if (code === 200) {
                            // 映射新数组
                            let newArr = result.map((item, index) => {
                                // 定义对象 (整合数据)
                                item.cover_image_url = host + item.cover_image_url;
                                item.release_date = new Date(item.release_date).toLocaleDateString();
                                item.index = index;
                                // 返回对象
                                return item;
                            })
                            // 进行赋值（响应式）
                            this.arr = newArr;
                        }
                    }
                )
                .catch(
                    // 请求失败
                    err => {
                        console.log("请求失败,请刷新", err);
                    }
                )

        }
    },

    // 初始化
    created() {
        // console.log("初始化")
        // 在初始化的时候 获取编辑推荐
        this.getEditRecommand();
    }
}
</script>